import * as React from 'react';
import Styles from './index.module.scss';
import render3DScene from '@/three/Index/render3DScene';

interface ParallaxPictureProps {
  /** mask opacity: 0 ~ 1 */
  opacity?: number;
}

const ParallaxPicture: React.FunctionComponent<ParallaxPictureProps> = React.memo(({ opacity }) => {
  const IndexContainer = React.createRef<HTMLDivElement>();
  React.useEffect(() => {
    render3DScene(IndexContainer.current!, '/src/assets/index/PDCIndex.png', '/src/assets/index/PDCIndex_depth.jpg');
  }, []);
  return (
    <>
      <div className={Styles.mask} style={{ opacity: opacity ?? 0.3 }}></div>
      <div className={Styles.picture} ref={IndexContainer}></div>
    </>
  );
});

export default ParallaxPicture;
